<template>
  <div class="lab-upload">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>实验报告上传</span>
          <el-button type="primary" @click="showDialog = true">上传实验报告</el-button>
        </div>
      </template>
      <p>请点击右上角按钮，上传个人实验报告。上传时会自动根据姓名与学号重命名文件。</p>
    </el-card>

    <el-dialog v-model="showDialog" title="上传实验报告" width="520px" @close="resetForm">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="学生姓名" prop="studentName">
          <el-input v-model="form.studentName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="学号" prop="studentNo">
          <el-input v-model="form.studentNo" placeholder="请输入学号" clearable />
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-input v-model="form.className" placeholder="请输入班级" clearable />
        </el-form-item>
        <el-form-item label="课程名" prop="courseName">
          <el-input v-model="form.courseName" placeholder="请输入课程名" clearable />
        </el-form-item>
        <el-form-item label="上传日期" prop="submitDate">
          <el-date-picker v-model="form.submitDate" type="date" value-format="YYYY-MM-DD" placeholder="选择上传日期" />
        </el-form-item>
        <el-form-item label="实验报告" prop="file">
          <el-upload
            class="upload-block"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            accept=".pdf,.doc,.docx,.ppt,.pptx,.zip,.rar"
            :on-change="onFileChange"
            :on-remove="onFileRemove"
          >
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">支持 pdf/doc/docx/ppt/pptx/zip/rar，最大10MB</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submit">上传</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { labReportApi } from '@/api/labReport'

export default {
  name: 'LabReportUpload',
  setup() {
    const showDialog = ref(false)
    const submitting = ref(false)
    const formRef = ref()
    const form = reactive({
      studentName: '',
      studentNo: '',
      className: '',
      courseName: '',
      submitDate: '',
      file: null
    })
    const fileList = ref([])

    const rules = {
      studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      studentNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
      className: [{ required: true, message: '请输入班级', trigger: 'blur' }],
      courseName: [{ required: true, message: '请输入课程名', trigger: 'blur' }],
      submitDate: [{ required: true, message: '请选择上传日期', trigger: 'change' }],
      file: [{ required: true, message: '请上传实验报告', trigger: 'change' }]
    }

    const onFileChange = (file, files) => {
      fileList.value = files.slice(-1) // 只保留最后一个
      form.file = file.raw
    }

    const onFileRemove = () => {
      fileList.value = []
      form.file = null
    }

    const submit = async () => {
      await formRef.value.validate(async (valid) => {
        if (!valid) return
        if (!form.file) {
          ElMessage.error('请先选择文件')
          return
        }
        submitting.value = true
        try {
          const fd = new FormData()
          fd.append('studentName', form.studentName)
          fd.append('studentNo', form.studentNo)
          fd.append('className', form.className)
          fd.append('courseName', form.courseName)
          fd.append('submitDate', form.submitDate)
          fd.append('file', form.file)
          const res = await labReportApi.upload(fd)
          if (res.data && res.data.code === 200) {
            ElMessage.success('上传成功')
            showDialog.value = false
            resetForm()
          } else {
            ElMessage.error(res.data?.message || '上传失败')
          }
        } catch (e) {
          ElMessage.error(e?.response?.data?.message || e.message || '上传失败')
        } finally {
          submitting.value = false
        }
      })
    }

    const resetForm = () => {
      if (formRef.value) formRef.value.resetFields()
      fileList.value = []
      form.studentName = ''
      form.studentNo = ''
      form.className = ''
      form.courseName = ''
      form.submitDate = ''
      form.file = null
    }

    return {
      showDialog,
      submitting,
      formRef,
      form,
      rules,
      fileList,
      onFileChange,
      onFileRemove,
      submit,
      resetForm
    }
  }
}
</script>

<style scoped>
.lab-upload {
  padding: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.upload-block {
  width: 100%;
}
</style>